<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>欢迎界面</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" href="css/main.css" media="all">
<link rel="stylesheet" href="lib/bootstrap/css/bootstrap.css"
	media="all">
<link rel="stylesheet" href="lib/bootstrap/js/bootstrap.min.js"
	media="all">
</head>
<body>
	<style type="text/css">
legend {
	display: block;
	width: 100px;
	border-bottom: 0px;
	font-family: "Microsoft YaHei", "Helvetica Neue";
}

legend a {
	color: #666;
}

legend a:hover {
	text-decoration: none;
}

.layui-table {
	font-family: "Microsoft YaHei", "Helvetica Neue";
}
</style>
	<div class="x-body">
		<blockquote class="layui-elem-quote">
			欢迎使用小区物业管理系统！<span class="f-14">v1.0</span>
		</blockquote>
		
		<fieldset class="layui-elem-field layui-field-title site-title">
			<legend>
				<a name="default">信息统计</a>
			</legend>
		</fieldset>

		<!--相关统计-->
		<div>
		<input type="text" name="payYear" required>年份
		<input type="text" name="payMonth" required>月份
		<button class="layui-btn" onclick="pay_generate(1)">
            <i class="layui-icon" >&#xe608;</i>物业费生成
        </button>
		<button class="layui-btn" onclick="pay_generate(2)">
            <i class="layui-icon" >&#xe608;</i>水费生成
        </button>
		<button class="layui-btn" onclick="pay_generate(4)">
            <i class="layui-icon" >&#xe608;</i>电费生成
        </button>
		
		</div>
		<div class="row">
			<div class="col-sm-4">
				<section class="panel">
					<div class="panel-heading">投诉次数</div>
					<div class="panel-body">
						<div class="echarts" id="daosou"
							style="height: 300px; height: 350px"></div>
					</div>
				</section>
			</div>
			
			<div class="col-sm-4">
				<section class="panel">
					<div class="panel-heading">最新活动</div>

					<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
					<script>
                    /*公告表查询*/
                    announcement_search();
                    function announcement_search(){
                    	$.ajax({
                        	async:true,
                        	type:"get",
                        	url:"${pageContext.request.contextPath}/AnnouncementServlet",
                        	data:{
                        		op:"announcementSimpleSearch"
                        		},
                        	contentType:"application/x-www-form-urlencoded",
                        	dataType:"json",
                        	success:function(result,status,xhr){
                        		let content="";
                        		let num=1;
                        		
                        		if(result.data!=null){
                        			$.each(result.data,function(index,obj){
                        				content +=
                        					"<li class=\"list-group-item\" title=\""+obj.annoContent+"\"> <span class=\"float-right\"> "+obj.annoTime+" </span> <span class=\"label label-warning\">"+num+"</span> "+obj.annoTitle+" </li>";
                        				num++;
                        			});
                        			$("#announcement-content").html(content);
                        		}else{
                        			$("#announcement-content").empty();
                        		}
                        		
                        		},
                        	error:function(xhr,status,error){}
                        });
                    }
                    </script>
					<div class="panel-body">
						<ul id="announcement-content" class="list-group clear-list m-t"></ul>
					</div>
				</section>
			</div>
			
			
			<div class="col-sm-4">
				<section class="panel">
					<div class="panel-heading">最新保修</div>
					<div class="panel-body" id="repair-content">
						<ul class="list-group clear-list m-t">
							<li class="list-group-item"><span class="float-right">
									12:00 &nbsp;<b style="color: #2fb9d4">已受理</b>
							</span> <span class="label label-default">10</span> B区地下停车场排水系统检修</li>
						</ul>
					</div>
				</section>
			</div>
			

		</div>

		<script src="lib/layui/layui.js" charset="utf-8"></script>
		
		<script src="js/jquery.min.js"></script>
		<script src="js/echarts.min.js"></script>
		<script>
        // 指定图表的配置项和数据
		$.getJSON("${pageContext.request.contextPath}/ComplaintServlet",{op:"count",pageNum:1,pageSize:7},function(result,status,xhr){
		
			if(status!=0){
				// 基于准备好的dom，初始化echarts实例
		        var yourChart = echarts.init(document.getElementById('daosou'));
				let roomList = result.data;
		        option = {
		        	    xAxis: {
		        	        type: 'category',
		        	        data: [roomList[0].roomNo, roomList[1].roomNo, roomList[2].roomNo, roomList[3].roomNo, roomList[4].roomNo, roomList[5].roomNo, roomList[6].roomNo]
		        	    },
		        	    yAxis: {
		        	        type: 'value'
		        	    },
		        	    series: [{
		        	        data: [roomList[0].ownerName, roomList[1].ownerName, roomList[2].ownerName, roomList[3].ownerName, roomList[4].ownerName, roomList[5].ownerName, roomList[6].ownerName],
		        	        type: 'bar'
		        	    }]
		        	};

		        // 使用刚指定的配置项和数据显示图表。
		        yourChart.setOption(option);
			}
		})
		</script>

		<script type="text/javascript">
        //费用生成函数
        function pay_generate(typeId){
        	if($("input[name=payYear]").val()=="" || $("input[name=payMonth]").val()==""){
        		alert("请输入年份和月份！");
        	}else{
        		$.ajax({
            		async:true,
                	type:"get",
                	url:"${pageContext.request.contextPath}/PayServlet",
                	data:{
                		op:"generate",
                		typeId:typeId,//1为物业费  2为水费 3为维修费 4为电费
                		payYear:$("input[name=payYear]").val(),
                		payMonth:$("input[name=payMonth]").val()
                		},
                	contentType:"application/x-www-form-urlencoded",
                	dataType:"json",
                	success:function(result,status,xhr){
                		alert(result.message);
                	},
                	error:function(result,status,xhr){
                		alert("failure");
                	}
                	
            		
            		
            		
            	});
        	}
        	
        	
        }
        
    </script>
	<script>
		/*保修现状 显示5条*/
		$.getJSON("${pageContext.request.contextPath}/RepairServlet",{op:"repairPage",pageNum:1,pageSize:5},function(result,status,xhr){
			let repairContent="";
			if(result.data!=null){
				$.each(result.data.list,function(index,obj){
					repairContent+=
						"<li class=\"list-group-item\"><span class=\"float-right\">"+
					obj.repairCreateTime+";<b style=\"color: #2fb9d4\">";
					if(obj.repairStatus=="01"){
						repairContent+="未受理";
					}else if(obj.repairStatus=="02"){
						repairContent+="已受理";
					}else if(obj.repairStatus=="03"){
						repairContent+="已维修";
					}
					repairContent+=
					"</b>"+
			"	</span> <span class=\"label label-default\">"+obj.roomNo+"</span>"+obj.repairContent+"</li>";
				})
				
			$("#repair-content").html(repairContent);
			}else{
				$("#repair-content").empty();
			}
			
			
		});
		
		
	
	
	
	
	</script>	
		


	</div>
	<div class="layui-footer footer footer-demo">
		<div class="layui-main">
			<p>
				<a href="/"> Copyright ©2022 汤臣二品 All Rights Reserved. </a>
			</p>

		</div>
	</div>

</body>
</html>